import React, { Component } from 'react'
import './index.less';

interface IContentWrapperProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
    padding?: string | number | null,
    /**列与列之间的间隙 */
    gap?: number
}
interface IContentWrapperState {

}

class ContentWrapper extends Component<IContentWrapperProps, IContentWrapperState> {
    static defaultProps: IContentWrapperProps = {
        padding: "16px 16px"
    }
    render() {
        const { padding, gap, style = {}, ...divProps } = this.props;
        let _style: React.CSSProperties = {}
        if (padding !== null) {
            _style.padding = this.props.padding as any;
            _style.height = "100%";
            _style.overflowY = "auto";
        }
        return (
            <div
                {...divProps}
                style={{ ...style, ..._style }}
                className={`content-wrapper ${divProps.className || ""}`}
            >
                {
                    this.props.gap ?
                        React.Children.map(this.props.children, (item, index) => {
                            return (
                                <>
                                    {index !== 0 && <div style={{ height: gap }} />}
                                    {item}
                                </>
                            )
                        })
                        :
                        this.props.children
                }

            </div>
        );
    }
}

export default ContentWrapper;